
class Enlarge
{
    // this = enlarge1/enlarge2
    constructor(el)
    {
        // this  enlarge1/enlarge2

        // 初始化全局数据
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')

        // 启动插件
        this.init()
    }

    // 启动插件
    init() {
        this.overOut()
        this.maskMove()
        // this.tbEnlarge()
    }

    // 鼠标在图片上移入移出
    overOut()
    {


        this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = 'block'
        this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = 'none'
        

    
    }

    // 鼠标移动
    maskMove() 
    {


        // 1 获取【放大镜盒模型】里面的【左侧图片】
        // 2 绑定【移动事件】
        this.imgObj.onmousemove = (evt) => { 
            let e = evt || window.event
            // 3 事件处理函数中：获取鼠标位置、限制
            let x = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth / 2
            let y = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight / 2

            if (x<0) x=0
            if (y<0) y=0
            let leftMax=this.imgObj.offsetWidth-this.maskObj.offsetWidth
            let topMax=this.imgObj.offsetHeight-this.maskObj.offsetHeight
            if(x>leftMax) x=leftMax
            if(y>topMax) y=topMax
            // 4 事件处理函数中：同步遮罩框
            this.maskObj.style.left = x + 'px'
            this.maskObj.style.top = y + 'px'
            // 5 事件处理函数中：同步放大镜背景位置
            this.tbEnlarge(x,y)
            // this.tbEnlarge(x, y)
        }
    }
    tbEnlarge(x,y) {
        this.enlargeObj.style.backgroundPosition = `-${x*2}px -${y*2}px`
    }
}
export default Enlarge